<template>
    <div>
        <h2>这是一个h2标题</h2>

        <div class="goManege">
            <h1 @click="goManage">跳转到管理页面--路由传参</h1>
            <h1 @click="goManage2">跳转到管理页面--内置参数传参</h1>
            <el-button
                plain
                @click="open1">
                点击弹出消息
            </el-button>
        </div>

        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
        </el-row>
        
        <!-- 轮播图 -->
        <div class="swiper">
            <el-carousel trigger="click"  class="swiper_list">
                <el-carousel-item v-for="item in swiperList" :key="item.id">
                    <img :src="item.goods_big_logo" style="width:100%;height:100%">
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 子路由 -->
        <div class="tabs">
            <h3>这是子路由的标题,点击显示tabs标签内容</h3>   
            <div class="tabs_item">
                <router-link :to="{name: 'show'}" tag="h3" >show组件</router-link>
                <router-link :to="{name: 'tabTwo'}" tag="h3" >tabs的组件（tabTwo组件）</router-link>
            </div>
            <router-view></router-view>
        </div>

        <div id="main" style="width: 600px;height:400px;"></div>
        <div class="wrap">
            <h2>list内容</h2>
            <div class="list" v-for="item in list" :key="item.id">
                <p>{{item.add_time}}</p>
                <img :src="item.goods_big_logo" style="width:50px;height:50px;" />
            </div>
        </div>


    </div>
</template>

<script>
import { log } from 'util';
export default {
    data() {
        return {
            list:[],
            swiperList:[]
        };
    },
    mounted() {
        this.drawChart();
        this.getList()
        this.postData()
    },
    methods: {
        //! 跳转
        goManage(){
            this.$router.push({path:`/manage/${2}`})
        },
        //! 跳转
        goManage2(){
            this.$router.push({
                name: 'manage2',
                params: {
                    id: 2
                }
            })
        },
        //! message消息提示
        open1() {
            this.$notify({
            title: '标题',
            message: '这是一条提示消息',
            type: 'info',
            iconClass:"none"
            });
        },
        //! echarts
        drawChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("main"));
                // 指定图表的配置项和数据
                let option = {
                    title: {
                    text: "ECharts 入门示例"
                    },
                    tooltip: {},
                    legend: {
                    data: ["销量"]
                    },
                    xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {},
                    series: [
                    {
                        name: "销量",
                        type: "bar",
                        data: [5, 20, 36, 10, 10, 20]
                    }
            ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        //! 普通get请求，无参数
        async getList(){
            const res =await this.$api.list.getData()
            console.log(res);
        },
        //! get的参数请求
        async postData(){
            const res =await this.$api.list.getKeyWord({
                query:"手机"
            })
            this.list = res.data.message.goods

            let swiperArr = []
            res.data.message.goods.forEach((item,index)=>{
                if(index>=4&&index<=6){
                    swiperArr.push(item)
                }else{
                    return false
                }
            })
            this.swiperList = swiperArr
            
        }
    }
};
</script>

<style scoped lang="scss">
//! 轮播
.swiper{
    width: 500px;
    height: 300px;
    background-color: #e3e3e3;
    margin: 30px 0;
    .swiper_list{
        height: 300px;
        border: 1px solid red;
    }
}
//! tabs
.tabs{
    border: 1px solid red;
    width: 500px;
    .tabs_item{
        display: flex;
        h3{
            border: 1px solid #000;
            margin-right: 20px;
        }
    }
}
.goManege{
    border: 1px solid blue;
    margin: 30px 0;
}

</style>
